import React, { Component, PureComponent } from 'react';
/* 
高性能组件
    1.PrueComponent 应用再类组件上面
    2.memo 应用在函数式组件上面
    高性能的体现：当传输数据与之前的数据一样时，不更新，不一样时更新，减少不必要的性能消耗
*/
/* class Tesingchild extends PureComponent {
    render() {
        return (
            <h1>Demo组件{this.props.msg}</h1>
        );
    }
    componentDidUpdate() {
        console.log("Tesing组件更新好了")
    }
} */
const Tesingchild = React.memo(function Demo(props){
    console.log("Demo 组件渲染了");
    return <h1>Demo组件{props.msg}</h1>
})
class Tesing extends Component {
    state = {
        msg: "🐂"
    };
    handleClick = (e) => {
        this.setState({
            msg: "🐏"
        })
    }
    render() {
        return (
            <div>
                <Tesingchild msg={this.state.msg}></Tesingchild>
                <button onClick={this.handleClick}>测试</button>
            </div>
        )
    }
}
export default Tesing;